<template>
  <div class="app-container">
    <div style="background-color: #fff; padding: 30px; margin-bottom: 16px; border-radius:  10px;">
      <span style="margin-right: 20px;color: #404040;font-size: 20px;font-weight: 600"> {{ info.ProjectName }}</span>
      <span style="color: #CFCFCF; font-size:12px;">{{ info.DistFullName }}</span>
      <div class="content">
        <el-descriptions :column="4" border>
          <el-descriptions-item
            v-for="(item, index) in descriptionsList"
            :key="index"
            :label="item"
            label-class-name="my-label"
            content-class-name="my-content"
            :label-style="{ background: '#F5FAFF', color: '#6D6D6D', textAlign: 'center' }"
          >
            {{ info[index] }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div style="background-color: #fff; margin-bottom: 16px; border-radius:  10px;">
      <sub-nav-tabs
        :tabs-list="tabsList"
        :active-name="activeName"
        :project-id="projectId"
        :info="info"
        @getActiveSubNameEmit="getActiveSubNameEmit"
      />
    </div>
  </div>
</template>
<script>
import SubNavTabs from '@/views/project/info/components/subNavTabs.vue'

import { getProjectDetail } from '@/api/project'
export default {
  name: 'ProjectInfo',
  components: { SubNavTabs },
  data() {
    return {
      descriptionsList: {
        ProjectNum: '项目编号',
        ProvincialNum: '省级项目编号',
        BuildCompanyName: '建设单位',
        BuildCorpCode: '建设单位统一社会信用代码',
        ProjectType: '项目分类',
        BuildNature: '建设性质',
        ProTotalArea: '总面积（平方）',
        ProTotalInvest: '总投资（万元）',
        ProRatifyLevel: '立项级别',
        ProRatifyNum: '立项文号'

      },
      activeName: '工程基本信息',
      tabsList: [
        { component: 'BasicInfos', name: '工程基本信息' },
        { component: 'contractInformation', name: '合同登记信息' },
        { component: 'completionAcceptance', name: '竣工验收' },
        { component: 'Bid', name: '招投标信息' },
        { component: 'Check', name: '施工图审查' },
        { component: 'Permit', name: '施工许可' }

      ],
      info: {},
      projectId: ''
    }
  },
  created() {
    this.projectId = this.$route.query.id
    if (!this.projectId) {
      this.$router.replace({
        path: '/project'
      })
    }

    this.getInfo(this.projectId)
  },
  methods: {
    // 1
    getInfo(projectId) {
      this.loading = true
      getProjectDetail({ projectId: projectId }).then((res) => {
        this.loading = false
        if (res.code === 200) {
          this.info = res.data.ProjectDetail
        }
      })
    },
    // 2  tabs
    getActiveSubNameEmit(v) {
      this.activeName = v.label
    }
  }
}
</script>
<style lang="scss" scoped>
.card-box{
  background-color: #fff;
  padding: 20px;
  margin: 20px 20px 20px 0;
  border-radius:  5px;
}
.infinite-list {
    height: 760px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.infinite-list-item{
  border: 1px solid #E8E8E8;
  margin-bottom: 20px;
  padding: 20px;
  border-radius:  5px;
}
 .card-title{
  font-size: 20px;
  color: #404040;
  margin-bottom: 10px;
  font-weight: 600
}
 .card-content{
  font-size: 13px;
  color: #6d6d6d;
  margin-bottom: 20px;
  border-bottom: 1px solid #E8E8E8;
}
.card-foot{
  color: #6D6D6D;
  font-size: 10px;
  display: flex;
  align-items: center;
}
.title{
  color: #404040;
  font-size: 16px;
  margin: 24px 0;
  padding-left: 10px;
  position: relative;
}
.title::before {
  content: "";
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #0087FE;
}
.content{
  margin-top: 24px;
}
</style>
